<template>
    <!-- v-bind 的小练习 -->
  <h1>v-bind 改变id选择器的名称</h1>
  <p :id="id">这是一个段落,风格为d1</p>
  <button @click="id='d2'">点击改变</button>
  <button @click="onClick">点击改变</button>
  </template>
  
  <script setup>
   import { ref } from 'vue'
  
   const id = ref(
    "d1"
   )
  
   const imgurl=ref("//imgcps.jd.com/img-cubic/creative_server_cia_jdcloud/v2/2020218/100011343823/FocusFullshop/CkNqZnMvdDEvMjc5MjEyLzMyLzU3NTQvMTQ0OTI5LzY3ZDlmMWI1RjlkM2UxZTkzLzIxNDk3N2JlMzE3YzVmY2MucG5nEgU3MDMtdDACOPqme0ITCg_lurflpoLmtJflj5HmsLQQAUIQCgzlirLniIbllYblk4EQAkIQCgznq4vljbPmiqLotK0QBkIKCgbotoXlgLwQB1jP_4_J9AI/cr/s/q.jpg")
  
  
  const onClick = () => {
    // 将 id.value 的值设置为 "d2"
    //响应式 ref 的赋值 是用 .value 来赋值
    id.value = "d1"
  }
  
  </script>
  
  <style scoped>
  #d1{
    font-size: 20px;
    color: red;
  }
  
  #d2{
    font-size: 20px;
    color: blue;
  }
  </style>